<template>
  <div class="mavon-editor-con">
    <mavon-editor :editable=editable :subfield="subfield" :toolbars="toolbars" ref="md" @change="changeVal" v-model="value" @imgAdd="addImg" />
  </div>
</template>
<script>
import $ from "jquery";
import axios from "axios";
export default {
  props: ["editable"],
  data() {
    return {
      value: "",
      renders: "",
      subfield: false,
      //简约工具栏-用于有实验窗口的编辑器，自行覆盖

      // toolbars: {
      //   bold: true, // 粗体
      //   italic: false, // 斜体
      //   header: true, // 标题
      //   //underline: true, // 下划线
      //   //strikethrough: true, // 中划线
      //   //mark: true, // 标记
      //   //superscript: true, // 上角标
      //   //subscript: true, // 下角标
      //   quote: true, // 引用
      //   ol: true, // 有序列表
      //   ul: true, // 无序列表
      //   //link: true, // 链接
      //   imagelink: true, // 图片链接
      //   code: true, // code
      //   table: true, // 表格
      //   //fullscreen: true, // 全屏编辑
      //   //readmodel: true, // 沉浸式阅读
      //   //htmlcode: true, // 展示html源码
      //   help: true, // 帮助
      //   /* 1.3.5 */
      //   //undo: true, // 上一步
      //   //redo: true, // 下一步
      //   //trash: true, // 清空
      //   //save: true, // 保存（触发events中的save事件）
      //   /* 1.4.2 */
      //   //navigation: true, // 导航目录
      //   /* 2.1.8 */
      //   alignleft: true, // 左对齐
      //   aligncenter: true, // 居中
      //   alignright: true, // 右对齐
      //   /* 2.2.1 */
      //   //subfield: true, // 单双栏模式
      //   preview: true // 预览
      // },
      toolbars: {
        //默认工具栏
        bold: true, // 粗体
        //italic: false, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        //mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        //link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        //readmodel: true, // 沉浸式阅读
        //htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        //trash: true, // 清空
        //save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        //navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      }
    };
  },
  methods: {
    changeVal(val, renders) {
      this.value = val;
      this.renders = renders;
      //console.log(val);
      //console.log(renders);
      return val;
    },
    getContent() {
      return this.value;
    },
    getRender() {
      return this.renders;
    },
    addImg(pos, $file) {
      let that = this;
      // 第一步.将图片上传到服务器.
      var formdata = new FormData();
      formdata.append("image", $file);
      axios({
        url: "/tes/markdown/picture",
        method: "post",
        data: formdata,
        headers: { "Content-Type": "multipart/form-data" }
      }).then(url => {
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        // $vm.$img2Url 详情见本页末尾
        if (url.status == 200) {
          if (url.data.code == 200) {
            let result = url.data.data;
            //console.log(that.$refs.md);
            //console.log(result);
            that.$refs.md.$img2Url(pos, result);
            //console.log(that.$refs.md, 44444);
          } else {
            that.$message({
              message: "图片上传失败",
              type: "error"
            });
          }
        }
      });
    }
  }
};
</script>
<style>
.mavon-editor-con .op-icon.fa.fa-mavon-trash-o {
  display: none !important;
}
</style>
